<template> 
	<view class="orderList">
		<view class="menulist">
			<view class="item_class">
				<view class="wait items" @click="showItem( 1 ) " :class="{'active': num ==1 }">
					待接单
				</view>
				<view class="baojia items" @click="showItem( 2 ) " :class="{'active': num ==2 }">
					已报价
				</view>
				<view class="pay items" @click="showItem( 3 ) " :class="{'active': num ==3 }">
					待支付
				</view>
				<view class="waitserve items" @click="showItem( 4 ) " :class="{'active': num ==4 }">
					待服务
				</view>
				<view class="waitpay items" @click="showItem( 5 ) " :class="{'active': num ==5 }">
					服务中
				</view>
				<view class="done items" @click="showItem( 6 ) " :class="{'active': num ==6 }">
					待结算
				</view>
				<view class="done items" @click="showItem( 7 ) " :class="{'active': num ==7 }">
					已完成
				</view>
				<view class="done items" @click="showItem( 8 ) " :class="{'active': num ==8 }">
					已取消
				</view>
			</view>
		</view>
		<view class="order_item" v-for="(iten, index) in orderList" :key="index">
			<view class="item" :class="{'closeorder': iten.status == 8}">
				<view class="top"> 
					<view class="user_info">
						<view class="avatar">
							<image src="../../../static/icon/avatar.png" mode=""></image>
						</view> 
						<view class="user_name"> 
							{{ iten.name }} 
						</view> 
					</view> 
					<view class="far" style="color:#007AFF;">
						{{ iten.status | getStatus }} 
					</view>
				</view>
				<!-- 服务内容 -->
				<!-- <view class="content">
					<view class="content_item">
						#服务内容#
					</view>
				</view> -->
				<!-- info -->
				<view class="address">
					<view class="stitle" style="color: #007AFF;">服务地址:</view>
					<view class="scontent">
						{{ iten.nativenative }} {{ iten.address }}
					</view>
				</view>
				<view class="address" v-if="iten.remark || iten.voice">
					<view style="color: #007AFF;" class="stitle">服务备注:</view> <view class="scontent" v-if="iten.remark"> {{ iten.remark }} </view> 
					<button v-else class="music" type="info" style="font-size: 30rpx;" @click="musicPlay(iten.voice)">播放备注录音</button>
				</view>
				<view class="address" v-if="iten.shiname">
					<view class="stitle" style="color: #007AFF;">预约师傅:</view>
					<view class="scontent">
						{{ iten.shiname }} 
					</view>
				</view>
				<view class="address" v-if="iten.orderprice">
					<view class="stitle" style="color: #007AFF;">师傅报价:</view>
					<view class="scontent">
						{{ iten.orderprice }} 
					</view>
				</view>
				<view class="address" v-if="iten.imprest">
					<view class="stitle" style="color: #007AFF;">预付金额:</view>
					<view class="scontent">
						{{ iten.imprest }} 
					</view>
				</view>
				<view class="address" v-if="iten.premium">
					<view class="stitle" style="color: #007AFF;">额外支出:</view>
					<view class="scontent">
						{{ iten.premium }} 
					</view>
				</view>
				<view class="address" v-if="iten.phone && iten.status > 3 && iten.status < 7">
					<view class="stitle" style="color: #007AFF;">联系师傅:</view>
					<view class="scontent">
						<button type="primary" style="font-size: 26rpx;margin: 0;" @click="callPhone(iten.phone)">拨打电话</button>
					</view>
				</view>
				<!-- baojia -->
				<view class="sub_btn">
					<button type="primary" class="payorder" v-if="iten.status == 3 " @click="payOrder(iten)">
						支付定金
					</button>
					<button type="primary" class="payorder" v-if="iten.status == 6" @click="payOrderLast(iten)">
						支付尾款
					</button>
					
					<!-- <button type="info"  v-if="iten.status == 3" @click="payOrder(iten)">取消订单</button> -->
					<button type="primary" v-if="iten.status == 2"  @click="ShowList(iten)">查看报价</button>
					<button style="background-color: red;" v-if="iten.status < 4" @click="deleteOrder(iten.orderid)">取消订单</button>
					<button type="primary" v-if="iten.status == 7 && iten.evaluate == 2"  @click="rateWork(iten)">评价服务</button>
					<button  v-if="iten.status == 7 && iten.evaluate == 1"  disabled >已评价</button>
				</view>
			</view>
		</view>
		
		<view class="reflash">
			<button type="primary" @click="ShuaXin" v-if="orderList.length">刷新订单</button>
		</view>
	</view>
</template>

<script>
	var player = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				orderList: [],
				showbaojia: true,
				num: "1",
			}
		},
		computed: {
			token() {
				return this.$store.state.token;
			},
			hasConfirm() {
				return this.$store.state.confirmMaster
			},
			hasrate() {
				return this.$store.state.areadyRate
			},
		},
		mounted() {
			this.HasConfirmOrder()
			this.HasRates()
			this.timeReflash()
			this.getAccess_token()
			this.reflash_token()
		},
		filters:{
			getStatus:(val) => {
				if(val == 1) {
					return "待接单"
				} else if(val == 2) {
					return  "已有报价"
				} else if(val == 3) {
					return  "已预约,待支付"
				} else if(val == 4) {
					return  "师傅上门中"
				} else if(val == 5) {
					return  "师傅服务中"
				} else if(val == 6) {
					return  "需结算尾款"
				} else if(val == 7) {
					return  "订单完成"
				} else {
					return "订单取消"
				}
			},
		},
		watch: {
			num( newVal, oldVal) {
				this.getOrder( newVal )
			},
			hasConfirm() {
				this.HasConfirmOrder()
			},
			hasRate() {
				this.HasRates()
			},
		},
		methods: {
			// 是否是评价完成后返回订单页
			HasRates() {
				if( this.hasrate ) {
					console.log("评价完成返回");
					this.num = 7
					this.getOrder( this.num )
					this.$store.commit("getAreadyRate", "")
				}  else {
					console.log("没有评价返回");
				}
			},
			// 是否有确定订单
			HasConfirmOrder() {
				if(this.hasConfirm) {
					console.log("用户已确认师傅");
					this.num = 3
					this.getOrder( this.num )
					this.$store.commit("getConfirmMaster", "")
				} else {
					console.log("暂无确认");
					this.getOrder(this.num)
				}
			},
			// 主动评价订单
			rateWork( order ) {
				this.$store.commit("getOrderInfo", order)
				uni.navigateTo({
					url:"/pages/rate/rate"
				})
			},
			// 删除订单
			async deleteOrder( orderid ) {
				let self = this 
				uni.showModal({
					cancelColor:"#007eff",
					title: "删除订单",
					content: "确定要删除订单?",
					cancelText: "否",
					confirmText: "是",
					confirmColor: "#df0609",
					async success( res ) {
						if(res.cancel) {
							uni.showToast({
								title: "无操作",
								icon: "loading"
							})
						} else {
							let ret = await self.$Request("POST", "/order/cancelorder", { token: self.token, orderid })
							if( ret.data.code == 202 ) {
								uni.showToast({
									title: "取消成功",
									icon: "success"
								})
								self.getOrder( self.num )
							}
						}
					},
				})
			},
			// 播放录音
			musicPlay( musicSrc ) {
				// console.log(musicSrc);
				player.src = musicSrc
				player.play()
			},
			// 点击刷新
			ShuaXin() {
				this.getOrder()
				uni.showToast({
					title:"刷新成功",
					icon: "success"
				})
			},
			// 获取用户订单
			async getOrder( num ) {
				let self = this
				if(this.token) {
					let res = await this.$Request("POST", "/order/indentlist",{ token: this.token, status: this.num})
					if(res.data.data) {
						this.orderList = res.data.data
					} else {
						this.orderList = []
					}
					 // console.log(this.orderList);
				}
			},
			// 过滤用户订单
			showItem( num ) {
				this.num = num
			},
			// 定时刷新订单
			timeReflash() {
				setInterval(() => {
					// console.log(1);
					this.getOrder()
					
				}, 1000 * 10)
			},
			// 查看报价列表
			ShowList(item) {
				uni.navigateTo({
					url:`/pages/baojia/baojia?orderid=${item.orderid}`
				})
			},
			// 支付预付金
			async payOrder( item ) {
				let orderid = item.orderid
				let imprest = parseInt(item.imprest)				
				let self = this
				let payorder = await this.$Request("POST", "/order/orderyufu",{ orderid,  token: this.token })
				console.log(item);
				uni.requestPayment({
					timeStamp: String(payorder.data.timeStamp),
					nonceStr: payorder.data.nonceStr,
					package: payorder.data.package,
					paySign: payorder.data.paySign,
					signType:"MD5",
					success(e) {
						console.log(e);
						uni.showToast({
							title: "支付成功",
							duration:2000,
							icon:"success"
						})
						self.sendMsg({
							 address: item.address,
							 name: item.name,
							 servicetime: item.servicetime,
							 state: "已支付定金",
							 userphone: item.userphone,
							 openid: item.openid,
						})
						self.num = 4
						self.getOrder( self.num )
					},
					fail(err) {
						console.log(err);
						uni.showToast({
							title: "支付失败",
							icon:"loading"
						})
					},
				})
			},
			// 获取订阅消息授权
			getSetting( item ) {
				console.log(item);
				let self = this
				uni.getSetting({
					withSubscriptions: true,
					success( res ) {
						let isauth = res.authSetting["scope.subscribeMessage"]
						
										// 用户同意授权
										wx.requestSubscribeMessage({
										  tmplIds: [
											  '-fT7TqL9Jza4TUhdfMuh6AC39GxWZj76i2bEpXJsxNk',
											  'fxviPJF4R7JGFzpRR8d2JiZJu7Sucm7_kYzXOGDlv_w',
											  '-EmYCJVoB59CJtCx892Q6HF5D-K9PeTQaWgKDvPS4D4'
											  ],
										  success (res) {
											  // console.log(res);
											  let msg = res.errMsg == "requestSubscribeMessage:ok"
											  if(msg) {
												    self.ConfirmMaster(item)
											  } else {
												  return false 
											  }
										  },
										  fail(err) {
											  console.log(err);
										  }
										})
						},
				})
				
			},
			// 下单成功后 发送消息
			sendMsg( data ) {
				let self = this
				uni.request({
					url: `https://www.awoojing.club/admin/sendMsg`,
					method: "POST",
					data: {
						touser: `${data.openid}`,
						access_token: `${self.access_token}`,
						page: '/pages/index/index',
						lang: 'zh_CN',
						data: {
						  thing1: {
							value: `${data.address}`
						  },
						  thing4: {
							value: `${data.name}`,
						  },
						  date5: {
							value: `${data.servicetime}`
						  },
						  phrase6: {
							value: `${data.state}`
						  },
						  phone_number8: {
							  value: `${data.userphone}`
						  }
						  
						},
						templateId: '-fT7TqL9Jza4TUhdfMuh6AC39GxWZj76i2bEpXJsxNk',
						
					},
					success( res ) {
						console.log(res);
					},
					fail( err ) {
						console.log(err);
					}
				})
				
					
			},
			//  进入当前页面后获取access_token
			getAccess_token() {
				let self = this
				uni.request({
					url: "https://www.awoojing.club/admin/getAccess_token",
					method:"POST",
					data: {},
					success(res) {
						// console.log(res);
						if(res.data.code == 200) {
							self.access_token = res.data.data
						}
					}
				})
				
			},
			// 定时刷新access_token
			reflash_token() {
				let self = this 
				setInterval(() => {
					self.getAccess_token()
				}, 1000 * 60 * 10)
			},
			// 支付尾款
			async payOrderLast( item ) {
				console.log(item);
				let orderid = item.orderid
				let imprest = parseInt(item.imprest)				
				let self = this
				let payorder = await this.$Request("POST", "/order/ordermoney",{ orderid,  token: this.token })
				 // console.log(item.orderid);
				 // console.log(payorder);
				uni.requestPayment({
					timeStamp: String(payorder.data.timeStamp),
					nonceStr: payorder.data.nonceStr,
					package: payorder.data.package,
					paySign: payorder.data.paySign,
					signType:"MD5",
					success(e) {
						// console.log(e);
						self.num = 7
						self.getOrder( self.num )
						uni.showToast({
							title: "支付成功",
							icon:"success"
						})
						self.$store.commit("getOrderInfo", item)
						self.$store.dispatch("emitOrderInfo", item)
						setTimeout(() => {
							uni.navigateTo({
								url:`/pages/rate/rate?orderid=${item.orderid}`
							})
						}, 1000)
					},
					fail(err) {
						// console.log(err);
						uni.showToast({
							title: "支付失败",
							icon:"loading"
						})
					}
				})
			},
			// 拨打电话
			callPhone( phone ) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #007AFF;
		border-bottom: 1px solid #007AFF;
	}
	.closeorder {
		color: #f2f2f2;
		
	}
	button {
		margin: 20rpx auto;
	}
	.reflash {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.orderList {
		width: 100%;
		box-sizing: border-box;
		.menulist {
			width: 100%;
			overflow-x: scroll;
			&::-webkit-scrollbar {
				display: none;
			}
			.item_class  {
				width: 1200rpx;
				box-sizing: border-box;
				padding: 0rpx 10rpx;
				display: flex;
				
				overflow: scroll;
				font-size: 30rpx;
				.items {
					width: 150rpx;
					box-sizing: border-box;
					padding: 10rpx 0;
					text-align: center;
					cursor: pointer;
					height: 80rpx;
					line-height:80rpx;
				}
			}
		}
		.order_item {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.item {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border: 1px solid #f2f2f2;
				border-radius: 30rpx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				.top {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f2f2f2;
					.user_info {
						display: flex;
						height: 100rpx;
						align-items: center;
						
						.avatar {
							width: 80rpx;
							height: 80rpx;
							overflow: hidden;
							border-radius: 50%;
							background-color: #fff;
							border: 1px solid #f2f2f2;
							image {
								width: 80rpx;
								height: 80rpx;
							}
						}
						.user_name {
							margin-left: 20rpx;
						} 
					}
					.far {
						color: #666;
					}
				}
				.content {
					width: 100%;
					box-sizing: border-box;
					padding: 30rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;
					.content_item {
						color: #007AFF;
						margin: 10rpx;
					}
				}
				.address {
					width: 100%;
					margin: 20rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.stitle {
						margin-right: 20rpx;
						width: 200rpx;
					}
					.scontent {
						flex: 1;
						color: #C0C0C0;
						font-size: 30rpx;
					}
					.music {
						flex:1;
						box-sizing: border-box;
						text-align: center;
						cursor: pointer;border: 1px solid #f2f2f2;
						
					}
				}
				.sub_btn {
					width: 100%;
				}
			}
		}
	}
	.payorder {
		background-color: #007AFF;
	}
</style>
